<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/layui.css">
        <title>抽奖</title>
        <link rel="stylesheet" type="text/css" href="css/1.css" /> 

        <link rel="stylesheet" type="text/css" href="css/main.css" /> 
        <script type="text/javascript" src="js/mmplayer.js"></script>
        
    </head>
    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" >
                <ul class="layui-tab-title " style="background:rgb(0, 0, 0)">
                    <li class="layui-nav-item layui-this" style="color:rgb(246, 248, 245)" >控制台</li>
                    <li style="color:rgb(246, 248, 245)" >名单</li>
                    <li style="color:rgb(246, 248, 245) " >抽奖页面</li>
                </ul>
                <div class="layui-tab-content" style="height: 100px;" >
                    <div class="layui-tab-item layui-show" onload="loadPlayer">
                        <div class="layui-inline">
                            <label class="layui-form-label">活动名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">奖品名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title2" required  lay-verify="required" placeholder="请输入标题奖品" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">奖品数量</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title3" required  lay-verify="required" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-input-block" style=" top: 55px">
                                <input type="file" id="CSSfile" style="display:none">
                            <button type="button" class="layui-btn" id="loadCSS">
                                <i class="layui-icon">&#xe67c;</i>选择页面样式
                            </button>
                        </div>
                        <header>
                            <span id="info" style="float:right; padding-left: 20px;"> Meow meow Player</span>
                        </header>
                        <aside class="control"> 
                            <ul id="controlPanel">
                                <li class='play'>
                                    <div id="pre" class="controlBtn" title="previous">I&lt;</div>
                                    <div id="playBtn"  class="controlBtn" title="stop">O</div>
                                    <div id="next" class="controlBtn" title="next">&gt;I</div>
                                </li>
                                <li>
                                    <div id="shuffle" title="shuffle the order of songs">
                                        Shuffle
                                    </div>
                                </li>
                                <li>
                                    <div id="empty" title="empty the list">
                                        Empty
                                    </div>
                                </li>
                                <li>
                                    <div class="add" title="添加音乐">
                                        <label for="addFiles" >Add </label>
                                        <input type="file" id="addFiles" multiple />
                                    </div>
                                </li>
                            </ul>
                            <div class="dividLine"></div>
                            <ol id="playlist">
                            </ol>
                        </aside>
                        <div id="visualizer">
                                    
                            <canvas width="600" height="300" id="canvas">Don't supported by your browser </canvas>
                            <div id="mirrorWrapper">
                                <canvas width="600" height="250" id="mirror"></canvas>
                            </div>
                        </div>
                        <div class="wrapper">
                            <div>
                                <h1 id="lm">中奖号码</h1>
                                <table frame="border" rules="all"  id="t">
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--选项卡2-->
                    <div class="layui-tab-item">
                        <input type="file" id="btn_file" style="display:none">
                        <button type="button" class="layui-btn" id="upload_xls">
                            <i class="layui-icon">&#xe67c;</i>上传名单表格
                        </button>
                        
                        <div id="form_display">
                            <form action="#" id="form_form">
                            <table class="layui-table" id="form_table">
                                <colgroup>
                                </colgroup>
                                <thead>
                                </thead>
                                <tbody>
                                </tbody>
                                </table>
                            </form>
                        </div>
                    </div>
                    <!--选项卡3-->
                    <div class="layui-tab-item" onload="loadLucky1">
                        <div class="container">
                            <br/>
                            <br/>
                            <div class="wrap">
                                <div class="numw">
                                    <ul class="roll" style="transition-delay: 2s" id="rollBox">
                                    </ul>
                                </div>
                            </div>
                            <div class="btnw">
                                <button class="btn">抽奖</button>
                                <button class="btn">重置</button>
                            </div>
                        </div>
                    </div>
               </div>
            </div>
        </div>

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/1.js"></script>
        <script src="js/layui.js"></script>
        <script>
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function(){
                var element = layui.element;
            });
        </script>
    </body>  
<script type="text/javascript" src="js/xlsx.core.min.js"></script>
<script src="js/layui.js"></script>
<script>

var FORM_CSV;
var HEAD_COUNT;
var FINAL_FORM;

$(function(){
    $('#loadCSS')[0].onclick = function(){
        $('#CSSfile').click();
    };

    $('#CSSfile')[0].onchange = function(){
        var file =$('#CSSfile')[0].files[0];
    }
});

$(function(){

  $('#upload_xls')[0].onclick = function(){
    $('#btn_file').click();
  };

  $('#btn_file')[0].onchange = function(){
    var file = $('#btn_file')[0].files[0];
    readWorkbookFromLocalFile(file, form2Table);
  }
});

//一般直接写在一个js文件中
layui.use(['layer', 'form', 'element'], function(){
  var layer = layui.layer
  ,form = layui.form
  ,element = layui.element;
});

function readWorkbookFromLocalFile(file, callback) {
  var reader = new FileReader();
  reader.onload = function(e) {
      var data = e.target.result;
      var workbook = XLSX.read(data, {type: 'binary'});
      if(callback) callback(workbook);
  };
  reader.readAsBinaryString(file);
}

function outputWorkbook(workbook) {
  var sheetNames = workbook.SheetNames; // 工作表名称集合
  sheetNames.forEach(name => {
      var worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
      for(var key in worksheet) {
          // v是读取单元格的原始值
          console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
      }
  });
}

function form2Table(workbook) {
  var sheetNames = workbook.SheetNames; // 工作表名称集合
  var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
  FORM_CSV = XLSX.utils.sheet_to_csv(worksheet);
  renderTable(FORM_CSV);
}

function renderTable(csv) {
  var rows = csv.split('\n');
  rows.pop();
  var headers = rows[0].split(',');
  console.log(rows);
  
  
  $('#form_form').prepend('<button class="layui-btn layui-btn-fluid" id="upload_form">保存名单</button>')
  rows.forEach(function(row, idx) {
    var text = '';
    var cols = row.split(',');

    if (idx == 0) {
      text = '<tr>';
      HEAD_COUNT = cols.length;
      for(var i=0; i<cols.length; i++) {
        text += '<th>' + cols[i] + '</th>';
        }
      text += '<th>删除</th></tr>';
      $('#form_table > thead').append(text);
    } else {
      text = '<tr>';
      for(var i=0; i<cols.length; i++) {
        text += '<td><input type="text" class="layui-input" value="' + cols[i] + '"></td>';
        }
      text += '<td><button class="layui-btn del_tr"><i class="layui-icon" style="font-size: 35px;text-align: center;">ဇ</i></button></td></tr>';
      $('#form_table > tbody').append(text);
    }
  });

  $('.del_tr').click(function(){
    $(this).parents('tr').remove();
  });

  $('#upload_form').click(function() {
    var text = '';
    var count = 0;
    FINAL_FORM = [];
    $('#form_form input').each(function(){
      text += $(this).val() + " ";
      count += 1;
      if (count % HEAD_COUNT == 0) {
        FINAL_FORM.push(text);
        text = '';
      }
    });
    layer.style(layer.alert(), {
      fontSize: '27px',
      color: 'green',
    });
    layer.alert('保存成功', {icon: 1});
  });
}

window.onload=function loadLucky1(){
    loadPlayer();
    var luckbtn = document.getElementsByClassName("btn")[0];//监听抽奖按钮
    luckbtn.addEventListener("click", function(e){
        loadForm();
        var str=(Math.floor(Math.random()*(FINAL_FORM.length))).toString();
        alert(str);
        var roll=document.getElementsByClassName("roll")[0];
        roll.style.cssText = "animation: circle1 4s linear";
        roll.style.transition = "all " + str * 0.15 + "s ease-out";
        roll.style.transitionDelay = "4s";
        roll.style.marginTop = -98 * (str) + "px";

        setTimeout(() => {
            var c = document.getElementById("t");
            var x1 = c.insertRow(0);
            //str为中奖名单显示的内容
            x1.innerHTML = FINAL_FORM[str];
        }, 4000);
    });

    var resetbtn = document.getElementsByClassName("btn")[1];
    resetbtn.addEventListener("click", function(e) {
        var first = document.getElementsByClassName("roll")[0];
        first.style.cssText = "";
        first.style.transform = "";
    });
}

function loadForm() {
    var box = $('#rollBox')
    for (var i = 0; i < FINAL_FORM.length; i++) {
        box.append('<li>' + FINAL_FORM[i] + '</li>')
    }
    for (var i = 0; i < FINAL_FORM.length; i++) {
        box.append('<li>' + FINAL_FORM[i] + '</li>')
    }
    
    addKeyFrames(FINAL_FORM.length*(-98))
    console.log(box)
}

function addKeyFrames(y){
    var style = document.createElement('style');
    style.type = 'text/css';
    var keyFrames = '\
    @keyframes circle1 {\
        0% {\
            transform: translateY(0px);\
        }\
        100% {\
            transform: translateY(A_DYNAMIC_VALUEpx);\
        }\
    }';
    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
    document.getElementsByTagName('head')[0].appendChild(style);
}

</script> 
    
</html>